<template>
	<view class='t-toptips' :style="{top: top,background: cubgColor}" :class="[show?'t-top-show':'']">
		<view v-if="loading" class="flex flex-sub">
			<view class="cu-progress flex-sub round striped active sm">
				<view :style="{ background: color,width: value + '%'}"></view>
			</view>
			<text class="margin-left">{{value}}%</text>
		</view>
		<block v-else>{{msg}}</block>

	</view>
</template>

<script>
	export default {
		props: {
			top: {
				type: String,
				default: 'auto'
			},
			bgColor: {
				type: String,
				default: 'rgba(49, 126, 243, 0.5)',
			},
			color: {
				type: String,
				default: '#e54d42',
			}
		},
		data() {
			return {
				cubgColor: '',
				loading: false,
				value: 5,
				show: false,
				msg: '执行完毕~',
			}
		},
		methods: {
			toast(title = '', {
				duration = 2000,
				icon = 'none'
			} = {}) {
				uni.showToast({
					title,
					duration,
					icon
				});
			},
			getRequest(url) {
				let theRequest = new Object();
				let index = url.indexOf("?");
				if (index != -1) {
					let str = url.substring(index + 1);
					let strs = str.split("&");
					for (let i = 0; i < strs.length; i++) {
						theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
					}
				}
				return theRequest;
			},

			/*
				上传说明：
				currentWebview: 当前窗口webview对象
				url：上传接口地址
				name：上传文件key值
				header: 上传接口请求头
				...：body内其他参数
			*/
			appChooseFile({
				currentWebview,
				url,
				name = 'file',
				header,
				...formData
			} = {}) {
				// #ifdef APP-PLUS
				let wv = plus.webview.create("", "/hybrid/html/index.html", {
					'uni-app': 'none', //不加载uni-app渲染层框架，避免样式冲突
					top: 0,
					height: '100%',
					background: 'transparent'
				}, {
					url,
					header,
					formData,
					key: name,
				});
				wv.loadURL("/hybrid/html/index.html")
				currentWebview.append(wv);
				wv.overrideUrlLoading({
					mode: 'reject'
				}, (e) => {
					let {
						fileName,
						id
					} = this.getRequest(e.url);
					fileName = unescape(fileName);
					id = unescape(id);
					let src = JSON.parse(id).result.src
					return this.onCommit(
						this.$emit('up-success', {
							fileName,
							src
						})
					);
				});
				// #endif
			},
			wxChooseFile({
				url,
				name = 'file',
				header,
				...formData
			} = {}) {
				wx.chooseMessageFile({
					count: 1,
					type: 'file',
					success: ({
						tempFiles
					}) => {
						let [{
							path: filePath,
							name: fileName
						}] = tempFiles;
						this.setdefUI();

						return uni.uploadFile({
							url,
							name,
							filePath,
							formData,
							header,
							success: (res) => {
								if (res.statusCode == 200) {
									let data = JSON.parse(res.data);
									//可自行添加后台返回状态验证
									return this.onCommit(this.$emit('up-success', {
										fileName,
										data
									}));
								}
								return this.errorHandler('文件上传失败', this.upErr);
							},
							fail: () => this.errorHandler('文件上传失败', this.upErr)
						});
					},
					fail: () => this.errorHandler('文件选择失败', this.upErr)
				})
			},
			/* 
			上传
			*/
			upload(param = {}) {

				if (!param.url) {
					this.toast('上传地址不正确');
					return;
				}

				if (this.loading) {
					this.toast('还有个文件玩命处理中，请稍候..');
					return;
				}


				// #ifdef APP-PLUS
				return this.appChooseFile(param);

				// #endif

				// #ifdef MP-WEIXIN
				return this.wxChooseFile(param);
				// #endif
			},
			/* 
			打开文件 
			*/
			open(filePath) {
				let system = uni.getSystemInfoSync().platform;
				if (system == 'ios') {
					filePath = encodeURI(filePath);
				}
				uni.openDocument({
					filePath,
					success: (res) => {
						console.log('打开文档成功');
					}
				});
			},
			/* 
			下载
			 type: temporary=返回临时地址，local=长期保存到本地
			 */
			download(url, type = 'temporary') {
				if (this.loading) {
					this.toast('还有个文件玩命处理中，请稍候..');
					return;
				}
				this.setdefUI();

				return new Promise((resolve, reject) => {
					let downloadTask = uni.downloadFile({
						url,
						success: ({
							statusCode,
							tempFilePath
						}) => {
							if (statusCode === 200) {
								if (type == 'local') {
									uni.saveFile({
										tempFilePath,
										success: ({
											savedFilePath
										}) => this.onCommit(resolve(savedFilePath)),
										fail: () => this.errorHandler('下载失败', reject)
									});
								} else {
									this.onCommit(resolve(tempFilePath))
								}
							}
						},
						fail: () => this.errorHandler('下载失败', reject)
					});

					downloadTask.onProgressUpdate(({
						progress = 0
					}) => {
						if (progress <= 100) {
							this.$nextTick(() => {
								this.value = progress;
							});
						}
					});
				})

			},

			onCommit(resolve) {
				this.msg = '执行完毕~';
				this.loading = false;
				this.cubgColor = 'rgba(57, 181, 74, 0.5)';
				setTimeout(() => {
					this.show = false;
				}, 1500);
				return resolve;
			},

			setdefUI() {
				this.cubgColor = this.bgColor;
				this.value = 0;
				this.loading = true;
				this.show = true;
			},

			upErr(errText) {
				this.$emit('up-error', errText);
			},

			errorHandler(errText, reject) {
				this.msg = errText;
				this.loading = false;
				this.cubgColor = 'rgba(229, 77, 66, 0.5)';
				setTimeout(() => {
					this.show = false;
				}, 1500);
				return reject(errText);
			}
		}
	}
</script>

<style scoped>
	.t-toptips {
		width: 100%;
		padding: 18upx 30upx;
		box-sizing: border-box;
		position: fixed;
		z-index: 90;
		color: #fff;
		font-size: 30upx;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		word-break: break-all;
		opacity: 0;
		transform: translateZ(0) translateY(-100%);
		transition: all 0.3s ease-in-out;
	}

	.t-top-show {
		transform: translateZ(0) translateY(0);
		opacity: 1;
	}
</style>
